<template>
	<view class="main">
		
		 <!-- 搜索 -->
		<app-search @toSearch="toSearch" :shows="true" @clickadd="add"></app-search>
		<view class="content" >
			<view class="photo" v-for="(item,index) in list" :key="index">
				<!-- 我的相册 -->
				<view class="title">
					<view>{{ item.lx == 0 ?'我的相册':item.lx == 1 ?'魔法相册':'' }}</view>
					<image  :src="$imgUrl('/title_bottom.png')"  mode="scaleToFill"/> 
				</view>
				<view class="list" v-if="addlist[index].length">
					<view class="list-item" v-for="(i,v) in item.list"  @tap="toItem(i)" :key="v" >
						<image class="list-item-img" v-if="i.url"
								:src="i.url" mode="scaleToFill" />
							<image class="list-item-img" v-else
								:src="$imgUrl('/1725513206439.jpg')" mode="scaleToFill" />
						<view class="list-item-name">{{ i.mc }}</view>
						<view class="list-item-date" v-if="i.cjsj">{{(i.cjsj).substring(0, 10)}}</view>
						 
					</view>
					
				</view>
				<view class="nocontent" v-else>
						<u-empty  mode="list"  icon="https://wx93.cn/upload/image/list.png" text="暂无相册" ></u-empty>
				</view>

			</view>
				
		</view>
		
		<u-action-sheet :actions="select" @select="selectClick" :closeOnClickOverlay="true" @close="show=false"
			cancelText="取消" :show="show"></u-action-sheet>
			
		<AddDialog ref="addDialogRef" @refreshData="getPhotoList" :type="DialogType"/>
		<DelDialog ref="delDialogRef" @refreshData="getPhotoList"/>
		

	</view>
</template>

<script>
import appSearch from '@/components/app-search';
	import AddDialog from './AddDialog.vue';
	import 
	DelDialog from './DelDialog.vue';
	export default {
		components: {
			AddDialog,
			DelDialog,
			appSearch
		},
		data() {
			return {
				search:"",
				DialogType:0,
				select: [{
						name: '新增相册',
						type: 1
					},
					{
						name: '新增魔法相册',
						type: 2
					},				
					{
						name: '新增照片',
						type: 3
					},
					{
						name: '删除相册',
						type: 4
					},

				],
				show: false,
				list:[],
				addlist:[]
			};
		},
		onShow(){
			this.getPhotoList()
		},
		methods: {
			//  获取相册信息
			async getPhotoList() {
				this.addlist = [];
					let res = await	this.$http.get('/app/xc/getSyXc', { mc: this.search })		
					if(res.code == 0){
					
						let arr1 = []
						let arr2 = []
						let arr3 = []
						res.list.forEach((item,index) => {
							if(item.lx == 0) {
								arr1.push(item)
							}
							if(item.lx == 1) {
								arr2.push(item)
							}
						});
						arr3 = [{lx:0,list:arr1},{lx:1,list:arr2}]
						this.list = arr3
						this.list.forEach(i=>{
							this.addlist.push( i.list)
						})
					
			
					}
				},
			add() {
				this.show = true;
			},
			toSearch(message) {
			this.search = message;
			this.getPhotoList();
		},
			toItem(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/photo/list?id=' + e.id +'&lx='+e.lx+'&mc='+e.mc 
				})
			},
			selectClick(e) {
				console.log(e);
				switch (e.type) {
					case 1:
						this.$refs.addDialogRef.open()
						this.DialogType = e.type
						break;
					case 2:
						this.$refs.addDialogRef.open()
						this.DialogType = e.type
						break;
					case 3:
						uni.navigateTo({
							url:'/pages/photo/photoUpload'
						})
						break;
						case 4:
							this.$refs.delDialogRef.open()
						
							break;
				


				}
				
			
			},
			// 更新数据
			refreshData(){
				// console.log("------------")
				this.getPhotoList()
			}
		}
	}
</script>
<style>
page{
	background-color: #000;
}
</style>
<style lang="scss" scoped>
	.main {
		height: 100%;
		background-color: #000;
	}

	.content {
		margin-top: calc(var(--status-bar-height) + 180rpx);
	}

	.photo {


		.list {
			display: flex;
			width: 700rpx;
			margin: 10rpx 25rpx;
			flex-wrap: wrap;
			box-sizing: border-box;
			justify-content: space-between;

			&-item {
				margin: 16rpx 0;
				// background-image: url('../../static/image/photo_bg.png');
				background: url($imgUrl + "/photo_bg.png") no-repeat;
				background-size: 100% 100%;
				width: 340rpx;
				height: 340rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				overflow: hidden;

				&-img {
					width: 300rpx;
					height: 270rpx;
				}

				&-name {
					font-size: 24rpx;
					position: absolute;
					bottom: 80rpx;
					left: 30rpx;
					color: #fff;
				}

				&-date {
					font-size: 24rpx;
					position: absolute;
					bottom: 40rpx;
					left: 30rpx;
					color: #fff;
				}
			}
		}

		.title {

			margin-top: 20rpx;
			margin-left: 10rpx;
			width: 180rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			view {
				line-height: 34rpx;
				font-size: 34rpx;
				color: #fff;
				font-weight: bold;
			}

			image {
				margin-top: 4rpx;
				width: 50rpx;
				height: 10rpx;
			}
		}
	}

	.header {
		width: 100%;
		overflow: hidden;
		// height: calc(var(--status-bar-height) + 100rpx);
		padding-top: calc(var(--status-bar-height) + 40rpx);
		// background-image:linear-gradient(to bottom ,#68DB95  ,#f1f1f1) ;
		// background-image: url('../../static/image/search_bg.png');
		background: url($imgUrl + "/search_bg.png") no-repeat;
		padding-bottom: 26rpx;
		position: fixed;
		top: 0;
		z-index: 100;
		background-size: 100% 100%;
		box-sizing: border-box;

		.box {
			margin-top: 30rpx;
			display: flex;
			height: 60rpx;
			align-items: center;
			width: 670rpx;
			margin-left: 20rpx;
			margin-rigth: 40rpx;
			padding-bottom: 10rpx;

			.add {
				height: 50rpx;
				width: 50rpx;
				margin-right: 20rpx;
			}

			.view {
				width: 460rpx;
				// background-image: url('../../static/image/input_bg.png');
				background: url($imgUrl + "/input_bg.png") no-repeat;
				background-size: 100% 100%;

				.input {

					//pointer-events: none;
					height: 44rpx;

					.icon {
						height: 40rpx;
						width: 40rpx;
						padding-right: 13rpx;
					}
				}

				.btn {
					@include btnMain();
					width: 200rpx;
					height: 66rpx;
					border-radius: 30rpx;
					margin-left: 30rpx;
					padding: 0 20rpx;
				}
			}
		}
	}
</style>